<script setup lang="ts">
//引导栏目
</script>
<template>
  <div class="product-fix-bar follow">
    <div class="fix-bar-wrapper">
      <h1 class="bar-text">您已经选择了</h1>
      <div class="bar-device-info">
        <h1 class="clearfix">
          <span class="title">Smartisan 手机立式扩展坞 × 1 </span>
        </h1>
        <h2>灰色</h2>
      </div>

      <div class="bar-btn disabled notice">
        <a>到货通知</a>
      </div>

      <div class="no-discount-price">
        <div class="bar-price">
          <i>￥</i>
          <span>299.00</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.product-fix-bar {
  .fix-bar-wrapper {
    .bar-accessories,
    .bar-device-info,
    .bar-gift,
    .bar-postage-fee,
    .bar-text {
      float: left;
    }
  }
}

.product-fix-bar {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fafafa;
  border-top: 1px solid #e3e3e3;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
  z-index: 25;
  .fix-bar-wrapper {
    width: 1220px;
    line-height: 20px;
    margin: 12px auto 0;
    .bar-text {
      color: #707070;
      font-size: 12px;
      font-weight: 500;
      margin-right: 20px;
    }
    .bar-device-info {
      position: relative;
      margin-right: 20px;
      font-size: 14px;
      .title {
        color: #707070;
      }
    }
    //按钮
    .bar-btn {
      box-sizing: content-box;

      width: 118px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      margin-left: 10px;
      border-radius: 6px;
      background-color: #6383c6;
      background-image: linear-gradient(#6383c6, #4262af);
      margin-top: -2px;
      padding: 1px;

      float: right;
      a {
        box-sizing: content-box;

        display: block;
        height: 34px;
        line-height: 34px;
        padding: 2px 0;
        border-radius: 6px;
        background-color: #5f7ed7;
        background-image: linear-gradient(#6f97e5, #527ed9);
        box-shadow: inset 0 1px 2px #7ea1e8;
        text-shadow: 0 -1px 0 #4f70b3;
        color: #fff;
        transition: none;
      }
    }
    .bar-btn.notice {
      background-color: #ffd330;
      background-image: linear-gradient(#ffd330, #ffd22d);
      a {
        cursor: pointer;
        background-color: #c7a522;
        background-image: linear-gradient(#ffd330, #ffd22d);
        box-shadow: inset 0 1px 2px #ffeb83;
        text-shadow: none;
      }
      a:hover {
        transition: all 0.15s ease-out;
        box-shadow: inset 0 1px 1px #ffeb83, inset 0 0 2px #cab92d,
          inset 0 -2px 3px #c7a236, inset 0 0 100px rgba(199, 165, 34, 0.6);
      }
    }
  }

  //价格
  .no-discount-price {
    float: right;
    margin-right: 20px;
    text-align: right;
    .bar-price {
      position: relative;
      font-size: 20px;
      font-weight: 700;
      color: #d44d44;
      line-height: 40px;
      i {
        font-style: normal;
        font-size: 14px;
      }
    }
  }
}
.product-fix-bar.follow,
.toast-tips {
  position: fixed;
}
</style>
